<template>
	<view class="zai-box">
		<image src="../../../static/zaizai-login/login.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">登录</view>
		<view class="zai-form">
			<input class="zai-input" v-model="username" placeholder="请输入账号" />
			<input class="zai-input" v-model="password" password placeholder="请输入密码" />
			<view class="captcha-box" v-if="captchaBase64">
				<image class="captcha-img" @click="createCaptcha" :src="captchaBase64" mode="widthFix"></image>
				<input type="text" class="input-box captcha" :inputBorder="false" v-model="captchaText"
					placeholder="请输入验证码" />
			</view>
			<view class="zai-label">忘记密码？</view>
			<button @click="loginBtn" class="zai-btn">立即登录</button>
			<navigator url="../psw-register/psw-register" hover-class="none" class="zai-label">还没有账号？点此注册.</navigator>
		</view>
	</view>
</template>

<script>
	var that;		// 当前页面对象
	var vk;			// vk依赖
	export default {
		data() {
			return {
				username: '',
				password: '',
				// needCaptcha: uni.getStorageSync('uni-needCaptcha'),
				captchaing: false,
				captchaBase64: '',
				captchaText: '',
				scrollTop:0,
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		onLoad() {
			// 生命周期函数
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		methods: {
			init(options){
				if (!options) options = that.options;
				console.log("init: ",options);
				
			},
			loginBtn() {


				if (this.username.length < 3) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 3 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}

				const data = {
					username: this.username,
					password: this.password,
					captcha: this.captchaText
				};

				// 耗时操作增加加载弹出
				uni.showLoading({
					title: '请求中'
				})

				vk.userCenter.login({
				  data: {
				    username: this.username,
				    password: this.password
				  },
				  success: function(data) {
				    // 登录成功后的逻辑
					uni.showToast({
						title:'登录成功'
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'../../index/index'
						})
					},1000)
				  }
				});

			},
			createCaptcha() {
				uniCloud.callFunction({
					name: 'uni-id-cf',
					data: {
						action: 'createCaptcha',
						params: {
							scene: "login"
						},
					},
					success: ({
						result
					}) => {
						if (result.code === 0) {
							this.captchaBase64 = result.captchaBase64
						} else {
							uni.showModal({
								content: result.msg,
								showCancel: false
							});
						}
					}
				})
			},
			isPerfect(){
				let isPerfect =  uni.getStorageSync('isPerfect')
				console.log(isPerfect)
				if(String(isPerfect) == '0'){
					uni.showToast({
						title:'请完善个人信息'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/userinfo/userinfo'
						})
					},1000)
				}
				else if(isPerfect == '1'){
					
				}
				else {
					uniCloud.callFunction({
						name:'user',
						data:{
							action:'isPerfect'
						},
						success: (res) => {
							// if(res.result.perfect == 0){
							// 	uni.showToast({
							// 		title:'请完善个人信息'
							// 	})
							// 	setTimeout(()=>{
							// 		uni.navigateTo({
							// 			url:'/pages/userinfo/userinfo'
							// 		})
							// 	},1000)
							// }
							uni.setStorageSync('isPerfect',res.result.perfect)
						}
					})
				}
			}
			
		}
	}
</script>

<style scoped>
	@import url("../common/login-page.css");

	.zai-box {
		padding: 0 100upx;
		position: relative;
	}

	.zai-logo {
		width: 100%;
		width: 100%;
		height: 310upx;
	}

	.zai-title {
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}

	.zai-form {
		margin-top: 300upx;
	}

	.zai-input {
		height: 1.5em;
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 36upx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #2196fc;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.captcha-box {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.captcha-img {
		margin: 15px 15px 0 0;
		width: 250rpx;
	}

	.captcha {
		width: 350rpx;
	}
</style>
